<template>
	<div id="head-wrap">
		<div class="pull-left head-icon" @click="changeCollapse"><i :class="[isCollapse?'el-icon-s-unfold':'el-icon-s-fold']"></i></div>


		<div class="pull-right">
			<!-- 用户头像 -->
			<div class="user-avator"><img :src="userImg"></div>
			<!-- 用户名下拉菜单 -->
			<el-dropdown class="user-name" trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
					{{userName}} <i class="el-icon-caret-bottom"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<!-- <a href="https://blog.csdn.net/qq_39313596" target="_blank">
						<el-dropdown-item>博客地址</el-dropdown-item>
					</a> -->
					<a href="https://gitee.com/rkm/vue3Project.git" target="_blank">
						<el-dropdown-item>项目仓库</el-dropdown-item>
					</a>
					<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

			<!-- 全屏显示 -->
			<div class="btn-fullscreen" @click="handleFullScreen">
				<el-tooltip class="fullcls" effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
					<i class="el-icon-rank"></i>
				</el-tooltip>
			</div>
		</div>





	</div>
</template>

<script>
	import {
		reactive,
		ref,
		isRef,
		toRefs,
		onMounted,
		computed
	} from "@vue/composition-api";
	import {
		getUserMsg
	} from "@/api/login.js"
	import {
		getToken,
		getUserName,
		getUserImg,
		removeToken,
		removeUserName,
		removeUserImg
	} from "@/utils/cookie.js"
	export default {
		name: "head",
		setup(props, {
			refs,
			root
		}) {
			//data
			let fullscreen = ref(false);
			let userImg = ref("");
			let userName = ref("");
			//computed
			let isCollapse = computed(() => root.$store.state.isCollapse);


			//onMounted
			onMounted(() => {
				userName.value=getUserName();
				userImg.value=getUserImg();
				// getUserMsg({
				// 	userId: 1
				// }).then(res => {
				// 	// console.log(res.data)
				// 	userName.value = res.data.userMessage.userName;
				// 	userImg.value = res.data.userMessage.userImg;
				// }).catch(error => {
				// 	console.log(error)
				// })

			})
			//method
			let changeCollapse = () => {
				root.$store.commit('setCollapse');
			};
			// 全屏事件
			let handleFullScreen = () => {
				let element = document.documentElement;
				if (fullscreen.value) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				fullscreen.value = !fullscreen.value;
			};
			// 用户名下拉菜单选择事件
			let handleCommand = (command) => {
				if (command == 'loginout') {
					// sessionStorage.removeItem('loginMsg')
					removeToken();
					removeUserImg();
					removeUserName();
					root.$router.push('/login');
				}
			};




			return {
				fullscreen,
				userImg,
				userName,
				isCollapse,


				handleFullScreen,
				handleCommand,
				changeCollapse
			}
		},

	}
</script>

<style lang="scss" scoped>
	// @import "@/styles/config.scss";
	#head-wrap {
		position: fixed;
		right: 0;
		left: $navWidth;
		height: $headHeight;
		line-height: $headHeight;
		background-color: #fff;
		// -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
		// -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
		// box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
		@include webkit(box-shadow, 0 3px 16px 0 rgba(0, 0, 0, 0.1));
		@include webkit(transition, all .3s ease 0s);
	}

	.open {
		#head-wrap {
			left: $navWidth
		}
	}

	.close {
		#head-wrap {
			left: $navWidth_1
		}
	}

	.head-icon {
		padding: 0 32px;
		font-size: 25px;
		cursor: pointer;
	}

	.btn-fullscreen {
		float: right;
		margin-right: 30px;
		margin-left: 20px;
		font-size: 24px;
		transform: rotate(47deg);
	}

	.btn-fullscreen .fullcls {
		border: 2px solid #fff;
	}

	.btn-fullscreen .fullcls:hover {
		border: 2px solid #fff;
		cursor: pointer;
	}

	.user-avator {
		float: left;
		margin-right: 5px;

		img {
			width: 30px;
			height: 30px;
			border-radius: 20px;
			margin-top: 24px;
		}

	}

	.user-name {
		float: left;
	}
</style>
